<%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="${ctx}/js/imgareaselect/css/imgareaselect-default.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/css/dlifestyle/uploader.css" />
<script type="text/javascript" src="${ctx}/js/imgareaselect/scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="${ctx}/js/common/ajaxfileupload.js"></script>

<!--图片上传-->
<style type="text/css">
	.pStyle {
		font: 12px/150% Arial, Verdana, "\5b8b\4f53";
		color: #666;
		background: #fff;
	}

	#tpsctcc {
		overflow: hidden;
		width: 636px;
		height: 330px;
		border: 1px solid #959595;
		background-color: #fff;
		margin-left: -319px !important;
		margin-top: -156px !important;
		position: fixed !important;
		_position: absolute;
		left: 50%;
		top: 50%;
		z-index: 993;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: #999 0px 0px 8px;
		-moz-box-shadow: #999 0px 0px 8px;
		box-shadow: #999 0px 0px 8px;
	}
	
	.conttpsc {
		padding: 10px 30px 0;
		font-family: 'Microsoft YaHei', 'Microsoft JhengHei', STHeiti, Georgia,
			'Times New Roman', Times, serif;
	}
	
	.conttpsc h3 {
		color: #333;
		font-size: 14px;
		font-weight: normal;
		font-family: "microsoft yahei";
		margin: 0px;
		padding: 0px;
	}
	
	.sctx01a {
		padding: 20px 0;
	}
	
	.sctx01b {
		padding: 20px 0 20px 40px;
		border-left: 1px dashed #ccc;
	}
	
	.sctx01ap2 {
		padding: 10px 0;
	}
	
	.sctx01bp2 {
		padding-top: 10px;
	}
	
	.sctx02 h3 {
		padding: 4px 0 14px;
	}
	
	.sctx02 h3 span {
		font-weight: normal;
		color: #999;
	}
	
	#preview1 {
		width: 100px;
		height: 100px;
		overflow: hidden;
	}
	
	#preview2 {
		width: 60px;
		height: 60px;
		overflow: hidden;
	}
	
	#tpsctcc .tccbotimg {
		text-align: right;
		padding-right: 42px;
	}
	
	.bannerimg {
		text-align: right;
		padding-right: 42px;
	}
	
	.addFBtnsp, .addFBtnsp1 {
		position: relative;
		display: block;
		height: 35px;
		width: 93px;
	}
	
	a.addFBtn {
		display: block;
		float: left;
		cursor: pointer;
		background: #f43b1d;
		width: 91px;
		height: 33px;
		line-height: 33px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border: 1px solid #f43b1d;
		font-size: 14px;
		color: #fff;
		text-align: center;
		text-decoration: none;
	}
	
	a.addFBtn:hover {
		text-decoration: none;
	}
	
	.logonew {
		cursor: pointer;
		position: absolute;
		top: 0px;
		left: 0;
		width: 93px;
		height: 35px;
		opacity: 0;
		filter: alpha(opacity = 0);
	}
	
	.addFBtnsp1 {
		width: 85px;
		height: 28px;
		float: right;
	}
	
	a.addFBtn1 {
		display: block;
		float: left;
		cursor: pointer;
		width: 85px;
		height: 28px;
		line-height: 28px;
		font-size: 12px;
		color: #34a6ad;
		text-align: center;
		text-decoration: none;
	}
	
	a.addFBtn1:hover {
		color: #34a6ad;
	}
	
	.logo1 {
		cursor: pointer;
		position: absolute;
		top: 0px;
		left: 0;
		width: 85px;
		height: 28px;
		opacity: 0;
		filter: alpha(opacity = 0);
	}
</style>
<script type="text/javascript">

function deleteImg(target){
	$(target).parent().remove();
	layer.msg("删除成功", {
		icon : 1,
		time : 1000
	// 1秒关闭（如果不配置，默认是3秒）
	}, function() {
		parent.layer.close(index); // 根据窗口索引关闭窗口
	});
}

var imageId = 'logoimage';
var imgType;
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;
	var scaleX2 = 60 / selection.width;
    var scaleY2 = 60 / selection.height;
    $('#preview1 img').css({
        width: Math.round(scaleX * 180),
        height: Math.round(scaleY * 180),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });  
	$('#preview2 img').css({
        width: Math.round(scaleX2 * 180),
        height: Math.round(scaleY2 * 180),
        marginLeft: -Math.round(scaleX2 * selection.x1),
        marginTop: -Math.round(scaleY2 * selection.y1)
    });
}

function end(img, selection){
	if (!selection.width || !selection.height)
	    return;
	$('#photoo').data('x',selection.x1);
    $('#photoo').data('y',selection.y1);
    $('#photoo').data('w',selection.width);
    $('#photoo').data('h',selection.height);
}

$(function () {
	$(".tctpsc").click(function(){ 
		$("#zzc").show();
		$("#tpsctcc").show();
		$(".conttpsca").show();
		$(".conttpscb").hide();
		$(".tccbotimg").hide();
		$(".bannerimg").hide();
		imgType = 1;
	});
	$(".banner").click(function(){ 
		$("#zzc").show();
		$("#tpsctcc").show();
		$(".conttpsca").show();
		$(".conttpscb").hide();
		$(".tccbotimg").hide();
		$(".bannerimg").hide();
		imgType = 2;
	});
	$("#zzc,.tccgb,.butgraygb").click(function(){ 
	   $("#zzc").hide(); 
	   $("#tpsctcc").hide();
	   $(".conttpsca").show();
	   $(".conttpscb").hide();
	   $(".tccbotimg").hide();
	   $(".bannerimg").hide();
	   $('#photoo').imgAreaSelect({hide:true});
	});
});

function selPicture(){
	imageId = 'logoimage';
}

function reSelPicture() {
	imageId = 'logoimage1';
}

function uploadNewLogo() {
	var url = '${ctx}/fileHandler/uploadCutImage?imageId=' + imageId;
	$(".conttpsca").show();
	$(".conttpscb").hide();
	$(".tccbotimg").hide();
	$(".bannerimg").hide();
	$('#photoo').imgAreaSelect({hide:true});
	$.ajaxFileUpload({
		url: url, 
		secureuri: false,
		fileElementId: imageId,
		dataType: 'json',
		success: function (data, status){
			var json = eval('(' + data + ')');
			var uploadInput = "<a class=\"addFBtn\" href=\"#\">选择图片</a><input type=\"file\" name=\"logoimage\" id=\"logoimage\" onclick=\"javascript:selPicture();\" onchange=\"uploadNewLogo()\" class=\"logonew\"  size=\"0\" style=\"height:35px;width:93px;\">";
			$(".addFBtnsp").html(uploadInput); 
			var uploadInput1 = "<a class=\"addFBtn1\" href=\"#\">重新选择图片</a><input type=\"file\" name=\"logoimage1\" id=\"logoimage1\" onclick=\"javascript:reSelPicture();\" onchange=\"uploadNewLogo()\" class=\"logo1\"  size=\"0\" style=\"height:28px;width:85px;\">";
			$(".addFBtnsp1").html(uploadInput1); 
	    	if (json.state == 1) {
	    		 layer.msg("只能上传.jpg, .png的图片格式");
			}else if(json.state == 2){
				layer.msg("文件过大，上传照片文件最大为10MB");
			}else if(json.state == 3){
				 layer.msg("上传图片服务器失败");
			}else if (json.state == 0) { 
				$(".conttpsca").hide();
	        	$('#photoo').attr("src","${ctx}"+json.logoUrl);
	        	$('#photoo').data("srcUrl",json.originalUrl);
	        	$('#photo1').attr("src","${ctx}"+json.logoUrl);
	        	$('#photo2').attr("src","${ctx}"+json.logoUrl);
	        	$('#photo1').css({width: 150, height: 150, marginLeft: -25, marginTop: -25});
	        	$('#photo2').css({width: 90, height: 90, marginLeft: -15, marginTop: -15});
	        	$('#photoo').data('x',30);
	            $('#photoo').data('y',30);
	            $('#photoo').data('w',120);
	            $('#photoo').data('h',120);
				$(".conttpscb").show();
				if(imgType == 1){
					$(".tccbotimg").show();
				}
				if(imgType == 2){
					$(".bannerimg").show();
				}
				$('#photoo').imgAreaSelect({x1:30,y1:30,x2:150,y2:150,handles:true,instance:true,fadeSpeed:200,
											onSelectChange:preview,onSelectEnd:end});
			}
		 },
		error: function (data, status, e){
			layer.msg(e);
		}
	}); 
	return false;
}

var indexs = 1;
var imgLength = $("#imgLength").val();
function imgSub(ctx, ctx, type) {
	 var uploadPath = '/upload';
	 $("#zzc").hide();
	 $('#photoo').imgAreaSelect({hide:true});
	 var imageLogo = $('#imageLogoUrl').val();
	 var url = '${ctx}/fileHandler/uploadLogoImage';
	 $.ajax({
			type:'post',
	        url : url,
	     	data : {
	     		uploadPath: uploadPath,
	     		pic:$('#photoo').data('srcUrl'),
	     		x:$('#photoo').data('x'),
	        	y:$('#photoo').data('y'),
	        	w:$('#photoo').data('w'),
	        	h:$('#photoo').data('h'),
	        	ow:$('#photoo').width(),
	        	oh:$('#photoo').height(),
	        	//初始选区的值
	        	ix:30,
	        	iy:30,
	        	iw:120,
	        	ih:120,
	        	imageLogo:imageLogo
	     	},
	        dataType:'json',
	        success : function(data, status){
	        	if (data.state == 1) {
		    		 layer.msg("只能上传.jpg, .png, .bmp的图片格式");
				}else if(data.state == 2){
					layer.msg("文件过大，上传照片文件最大为10MB");
				}else if(data.state == 3){
					 layer.msg("上传图片服务器失败");
				}else if (data.state == 0) {
					layer.msg('上传成功');
					$('#logoimage').attr('disabled',false);
					$('#logoimage1').attr('disabled',false);
					if(type == 2){
						if(imgLength == 0){
							var html = '<div id="delete${item.url}" style="float:left;position: relative;" onmouseover="showdelete(this);" onmouseout="hidedelete(this);">';
						       html += "<img onmouseover='showdelete(this);' id='imgPic"+ data.logoUrl +"' width='100px' height='100px;' style='border-radius: 14px;float:left;margin-right:10px;' src=${sessionScope.image_logo}"+data.logoUrl+">";
							   html += '<span class="deletegoods" onclick="deleteImg(this);" style="display: none;"><img style="position: absolute;top: 1px; right: 11px" title="删除图片" src="${ctx}/images/deletegoods.png"/></span>';
							   html += '<input id="imgId' + indexs + '" type="hidden" value="'+ data.logoUrl + '"></div>';
							/* var html = "<span id='delete"+data.logoUrl+"'><input id='imgId" + index + "' type='hidden' value='"+ data.logoUrl + "'>";
							    html += "<img id='imgPic"+ data.logoUrl +"' width='100px' height='100px;' style='border-radius: 14px;margin-right:10px;' src=${sessionScope.image_logo}"+data.logoUrl+">";
							    html += "</span>"; */
							    $("#imgArea").append(html);
								$("#imgLength").val(indexs);
								indexs++;
						}else{
							imgLength++;
							var html = '<div id="delete${item.url}" style="float:left;position: relative;" onmouseover="showdelete(this);" onmouseout="hidedelete(this);">';
					        html += "<img onmouseover='showdelete(this);' id='imgPic"+ data.logoUrl +"' width='100px' height='100px;' style='border-radius: 14px;float:left;margin-right:10px;' src=${sessionScope.image_logo}"+data.logoUrl+">";
						    html += '<span class="deletegoods" onclick="deleteImg(this);" style="display: none;"><img style="position: absolute;top: 1px; right: 11px" title="删除图片" src="${ctx}/images/deletegoods.png"/></span>';
						    html += '<input id="imgId' + imgLength + '" type="hidden" value="'+ data.logoUrl + '"></div>';
							/* var html = "<span id='delete"+data.logoUrl+"'><input id='imgId" + imgLength + "' type='hidden' value='"+ data.logoUrl + "'>";
							html +="<img id='imgPic"+ data.logoUrl +"' width='100px' height='100px;' style='border-radius: 14px;margin-right:10px;' src=${sessionScope.image_logo}"+data.logoUrl+">";
						    html += "</span>"; */						
							$("#imgArea").append(html);
							$("#imgLength").val(imgLength);
						}
					}
					if(type == 1){
		        		$('#preview3').attr("src",'${sessionScope.image_logo}'+ data.logoUrl);
		        		$('#imageLogo').val(data.logoUrl);
					}
					
	 				$("#tpsctcc").hide();
	 				$('#picId').val(data.fileId);
				}
	        },
	        
			error: function (data, status, e){
				layer.msg(e);
			}
		}); 
		return false;
}

/* function deletePic(target){
	//询问框
	layer.confirm('确认要删除？', {
	    btn: ['确定','取消'] //按钮
	}, function(index){
		layer.close(index);
		$(target).parent().remove();
	});
} */
</script>
<div id="zzc" style="display:none"></div>
<div id="tpsctcc" style="display:none">
  <div class="tcc">
    <span class="tccgb"></span>
    <div class="tcctop">上传/修改图像</div>
    <div class="tccmain">
      <div class="contdxgl">
        <!--第一步开始-->
        <div class="conttpsc conttpsca">
          <table width="100%">
            <tr>
              <td valign="top">
                <div class="sctx01a" style="padding-top: 10px;">
                  <h3>新的图像：</h3>
                  <span class="addFBtnsp" style="margin-top:15px">
                        <a class="addFBtn" href="#">选择图片</a>
						<input type="file" name="logoimage" id="logoimage" onclick="javascript:selPicture();" onchange="uploadNewLogo()" class="logonew"  size="0" style="height:35px;width:93px;">
					</span>
                  <p class="cgray pStyle" style= "margin-top:20px;">照片文件大小不超过10MB，支持.jpg, .png的图片格式</p>
                  <p class="sct01apcg" style="display:none">duoerdesign/html/images/dndtwbh.gif</p>
                </div>
              </td>
              <td width="178px" valign="top">
                <div class="sctx01b" style="padding-top:5px">
                  <h3>当前图像：</h3>
                  <p class="sctx01bp2">
                  <c:choose>
                 	  <c:when test="${not empty headPic}">
                 		  <img width="120" height="120"
                 			  src="${ctx}/fileUploadController/getImage?fileId=${headPic}&picType=0"/></c:when>
                 	  <c:otherwise>
                 	  	  <img width="120" height="120" src="${ctx}/images/default.jpg" /></c:otherwise>
                  </c:choose>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!--第一步结束-->
        <!--第二步开始-->
        <div class="conttpsc conttpscb" style="display:none">
          <table width="100%">
            <tr>
              <td valign="top">
                <div class="sctx02">
                  <h3>编辑并预览图片：<span>可以用鼠标拖动来调整图片位置和大小</span></h3>
                  <p style="padding:0px;margin:0px"><img id="photoo" width=180 height=180 src="${ctx}/images/uploader/mecon40.gif" /></p>
                </div>
              </td>
              <td valign="top">
                <div class="sctx02 sctx02b">
                  <h3>图像预览：</h3>
                  <table width="100%">
                    <tr>
                      <td valign="bottom">
                        <p id="preview1" style="padding:0px;margin:0px"><img id="photo1" width="100" height="100" src="${ctx}/images/uploader/mecon40.gif" /></p>
                        <p class="pStyle" style="padding:0px;margin:0px">100X100px</p>
                      </td>
                      <td valign="bottom">
                        <p id="preview2" style="padding:0px;margin:0px"><img id="photo2" width="60" height="60" src="${ctx}/images/uploader/mecon40.gif" /></p>
                        <p class="pStyle" style="padding:0px;margin:0px">60X60px</p>
                      </td>
                    </tr>
                  </table>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!--第一步结束-->
      </div>
    </div>
    <div class="tccbot tccbotimg" style="height:40px;">
    <input type="button" onclick="imgSub('${ctx}','${ctx}','1')" class="butred" 
    style="margin-right:20px;width:60px;height:25px;background-color:#593505;color:white;margin-left: 180px;" value="确定" /> 
    <!-- <a class="acblu" href="javascript:selPicture();"></a> -->
    <span class="addFBtnsp1">
		<a class="addFBtn1" href="#">重新选择图片</a>
		<input type="file" style="margin-right: 40px;" name="logoimage1" id="logoimage1" onclick="javascript:reSelPicture();" onchange="uploadNewLogo()" class="logo1"  size="0" style="height:28px;width:85px;">
	</span>
    </div>
    <div class="tccbot bannerimg" style="height:40px;">
    <input type="button" onclick="imgSub('${ctx}','${ctx}','2')" class="butred" 
    style="margin-right:20px;width:60px;height:25px;background-color:#593505;color:white;margin-left: 180px;" value="确定" /> 
    <!-- <a class="acblu" href="javascript:selPicture();"></a> -->
    <span class="addFBtnsp1">
		<a class="addFBtn1" href="#">重新选择图片</a>
		<input type="file" style="margin-right: 40px;" name="logoimage1" id="logoimage1" onclick="javascript:reSelPicture();" onchange="uploadNewLogo()" class="logo1"  size="0" style="height:28px;width:85px;">
	</span>
    </div>
  </div>
</div>